<template>
  <div class="m-dd">
    <a class="ico-ios" href="https://itunes.apple.com/us/app/%E5%A5%BD%E4%B8%8B%E5%8D%95/id1240095358?mt=8"></a>
    <a class="ico-android" href="http://www.haoxiadan.cn/download/hxd_2.0.6_206_jiagu_sign.apk"></a>
    <div id="mask" v-if="maskShow">
      <div class="arrow"></div>
    </div>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        maskShow: false
      }
    },
    created() {
      const ua = navigator.userAgent.toLowerCase()
      if (ua.match(/MicroMessenger/i) == 'micromessenger') {
        this.maskShow = true
      } else {
        this.maskShow = false
      }
    }
  }
</script>


<style lang="scss">
  .m-dd {
    width: 100vw;
    height: 100vh;
    overflow: hidden;
    background: url(../assets/download/pg.png) no-repeat;
    background-size: cover;
    text-align: center;
    a {
      display: block;
      margin: 0 auto;
      width: 200px;
      height: 45px;
    }
    .ico-ios {
      margin-top: 98%;
      margin-bottom: 30px;
      background: url(../assets/download/btn_ios.png) no-repeat;
      background-size: cover;
    }
    .ico-android {
      background: url(../assets/download/btn_android.png) no-repeat;
      background-size: cover;
    }

    #mask {
      position: absolute;
      left: 0;
      right: 0;
      top: 0;
      bottom: 0;
      background: rgba(0, 0, 0, .5);
    }

    .arrow {
      position: absolute;
      left: 0;
      right: 0;
      top: 20px;
      width: 100%;
      height: 156px;
      background: url(../assets/download/arrow.png) no-repeat;
      background-size: contain;
      z-index: 10;
    }
  }
</style>

